<template>
	<view class="personal">
		<!-- 顶部作者栏 -->
		<nav-bars ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			:title="titleText">
		</nav-bars>
		<view class="p_auth">
			<!-- <nav-bar :background="navBackground" isBack :backColor="navBackColor" isFloor :floorOpacity="navFloorOpacity">
				<view class="p_aCan" :class="{'active': navShow}" slot="center">
					<view>户型详情</view>
				</view>
			</nav-bar> -->

		</view>

		<!-- 背景墙 -->
		<view class="p_wall">
			<view class="p_wPicture">
				<image :src="house.thumb_url[0].path"></image>
			</view>
			<!-- <view class="p_wShadow"></view> -->
		</view>

		<!-- 用户信息 -->
		<view class="p_user">
			<view class="d_cTitle" id="userName">{{house.estate}} | {{house.area}}m² | {{house.house_type}}</view>
			<view class="d_cInfo">
				<text class="pR-32">{{house.desc}}</text>
			</view>

			<view class="housenum"
				v-if="house.parlour_num || house.bedroom_num||house.toilet_num||house.kitchen_num||house.balcony_num">
				<view v-if="house.parlour_num" class="num">
					<text>客厅</text>
					<text>{{house.parlour_num}}</text>
				</view>
				<view v-if="house.bedroom_num" class="num">
					<text>卧室</text>
					<text>{{house.bedroom_num}}</text>
				</view>
				<view v-if="house.toilet_num" class="num">
					<text>卫生间</text>
					<text>{{house.toilet_num}}</text>
				</view>
				<view v-if="house.kitchen_num" class="num">
					<text>厨房</text>
					<text>{{house.kitchen_num}}</text>
				</view>
				<view v-if="house.balcony_num" class="num">
					<text>阳台</text>
					<text>{{house.balcony_num}}</text>
				</view>
			</view>
		</view>

		<!-- 数据列表 -->
		<view class="p_data">
			<view class="p_dContain">
				<view class="p_dSticky" :style="{'top': navHeight -4+ 'px'}">
					<!-- <view class="p_dTabs" id="tabBar" style="justify-content: space-around;">
						<view class="p_dtItem" id="tabBar_Demo" :class="{'active': tabType === 'Demo'}" @tap="tabToggle('Demo')">装修案例</view>
						<view class="p_dtItem" id="tabBar_Dyna" :class="{'active': tabType === 'Dyna'}" @tap="tabToggle('Dyna')">AI轻设计</view>
						<view class="p_dtItem" id="tabBar_Eval" :class="{'active': tabType === 'Eval'}" @tap="tabToggle('Eval')">设计师推荐</view>
						<view class="p_dtCursor" id="tabBar_Cursor" :style="{'transform': 'translateX(' + (tabBarCursorX ? tabBarCursorX : '87.75') + 'px)'}"></view>
					</view> -->
					<u-tabs :bar-style="tabsBottomStyle" :list="list" inactive-color="#939393" active-color="#333333"
						:is-scroll="false" font-size="28" :current="current" @change="TabsChange"></u-tabs>
				</view>
				<view class="p_dCan">
					<!-- 装修案例 -->
					<view class="p_dList" id="tabItem_Demo" v-if="current == 0">
						<!-- <view class="p_dTitle">
							<view class="p_dNums" @tap="toPage('demo_list')">
								<view class="p_dArrow iconfont icon-more"></view>
								<text>{{demoNum}}个</text>
							</view>
							<text>装修案例</text>
						</view> -->
						<!-- <view style="display: flex;align-items: center;padding: 32rpx 32rpx 0 32rpx;background: #fff;justify-content: space-between;" @tap="toPage('demo_list')">
							<view style="font-size: 36rpx;font-weight: bold;">装修案例</view>
							<u-icon :label="demoNum+'个'" label-pos="left" name="arrow-right" size="30" color="#606266"></u-icon>
						</view> -->
						<view class="p_dDemo">
							<view>
								<view v-for="(items,index) in demoList" :key="index" v-if="index<3" style="">
									<view class="p_ddItem" @tap="toPage('demo_detail' , { trendId: items.id })">
										<view class="p_ddBanner">
											<image :src="items.thumb_url[0].path"></image>
											<view class="i_tBtn" @tap.stop="dviewr(items.display_url)"
												v-if="items.display_url">
												<view class="i_tbImg">
													<image src="@/static/home/3d.png"></image>
												</view>
												<view class="i_tbTxt">3D</view>
											</view>
										</view>
										<view class="p_ddInfo">
											<view class="p_ddTag" v-if="items.design_style.length >0">
												<text v-for="(itemv,index) in items.design_style"
													:key="index">{{itemv.name}}</text>
											</view>
											<view class="p_ddCont">
												<view class="p_ddVal">
													<text class="pR-32">报价：{{items.offer}}万</text>
													<text>{{items.area}}m²</text>
													<text class="p_ddCutLine"></text>
													<text>{{house.house_type}}</text>
													<text class="p_ddCutLine"></text>
												</view>
											</view>
										</view>
										<view class="p_ddRemark">{{items.title}}</view>
									</view>
								</view>
							</view>
							<view class="p_dBtn" v-if="demoList.length > 0" @tap="toPage('demo_list')">查看全部案例</view>
						</view>
					</view>
					<view v-if="current == 1">
						<view class="DlistView">
							<!-- <view style="display: flex;align-items: center;padding: 32rpx 32rpx 0 32rpx;background: #fff;justify-content: space-between;margin-bottom: -15rpx;" @click="Go3Dpage">
								<view style="font-size: 36rpx;font-weight: bold;">3D体验馆</view>
								<u-icon  label-pos="left" name="arrow-right" size="30" color="#606266"></u-icon>
							</view> -->
							<view class="l_dList">
								<view class="l_dDemo">
									<view class="no-card" v-if="demoList3D.length==0">
										<image src="https://manager.ryz1620.com/static/my/sm.png"></image>
										<text>暂无案例~</text>
									</view>
									<view class="i_dItem" v-for="(items, index) in demoList3D" :key="items.id"
										@click="viwerurl(items.light_design_id)">
										<view class="s_tit">{{items.title}} | {{items.area}}m² | {{items.house_type}}
										</view>
										<view class="s_tops">
											<view class="ts_left">
												<image :src="items.house_thumb_url[0].path"></image>
											</view>
											<view class="ts_right">
												<view class="i_tBtn">
													<view class="i_tbImg iconfont iconhuaban33"></view>
													<view class="i_tbTxt">3D</view>
												</view>
												<view class="i_tSwiper">
													<view class="i_tCont">
														<image :src="items.thumb_url[0].path"></image>
													</view>
												</view>
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
						<view class="p_dBtn" v-if="demoList3D.length > 0" @click="Go3Dpage(0)">进入3D体验馆</view>
						<view class="p_dBtn" v-if="demoList3D.length == 0" @click="Go3Dpage(1)">去看看其他的</view>
					</view>
					<!-- 设计动态 -->
					<!-- <view class="p_dList" id="tabItem_Dyna" v-if="current == 1">
						<view class="p_dTitle">
							<view class="p_dNums" @tap="toPage('dynamic_list')">
								<view class="p_dArrow iconfont icon-more"></view>
								<text>{{dynaNum}}个</text>
							</view>
							<text>AI轻设计</text>
						</view>
						<view class="aiimg" @click="navTo('/pages_view/pages/desiginview/experience')">
							<image src="https://cos.ryz1620.com/liankun/static/IMG267.png" mode="widthFix"></image>
						</view>
					</view> -->
					<!-- 设计师 -->
					<view class="p_dList" id="tabItem_Eval" v-if="current == 2">
						<!-- <view class="p_dTitle">
							<view class="p_dNums" @tap="navTomore()">
								<view class="p_dArrow iconfont icon-more"></view>
								<text>更多</text>
							</view>
							<text>TA们擅长该户型设计</text>
						</view> -->
						<view style="display: flex;align-items: center;padding: 32rpx 32rpx 0rpx 32rpx;background: #fff;justify-content: space-between;" @tap="navTomore()">
							<view style="font-size: 36rpx;font-weight: bold;">TA们擅长该户型设计</view>
							<u-icon label="更多" label-pos="left" name="arrow-right" size="30" color="#606266"></u-icon>
						</view>
						<view class="i_dList">
							<view class="i_dItem" v-for="(item,index) in supportlist" :key="index"
								@click="navTo('/pages_design/pages/design/personal/personal?designerId=' + item.id)">
								<view class="i_dUser">
									<view class="i_dHead">
										<image :src="item.avatar.path"></image>
									</view>
									<view class="of-hidden">
										<view class="i_dFee"><text class="ft-bold fs-28">{{item.end_offer}}</text>元/m²
										</view>
										<view class="of-hidden">
											<view class="i_dName">{{item.title}}</view>
											<view class="i_dRemark">从业 {{item.employ_year}}年 | 方案 {{item.case_num}}
											</view>
										</view>
										<view class="i_dTags">
											<view class="i_dTag" v-for="(items,indexs) in item.design_style"
												:key="indexs">{{items.name}}</view>
										</view>
									</view>
								</view>
								<view class="i_dImage">
									<image :src="item.back_thumb_url.path"></image>
								</view>
							</view>

						</view>

					</view>

				</view>

			</view>

		</view>


	</view>
</template>

<script>
	// import navBar from "@/components/navBar/navBar.vue"
	import service_desginview from '@/service/desginview'
	import service_design from '@/service/design'
	export default {
		data() {
			return {
				tabsBottomStyle: {
					'border-radius': ' 4rpx 4rpx 0rpx 0rpx',
					width: '40rpx',
					height: '8rpx',
					background: '#FFD425'
				},
				current: 0,
				list: [{
						name: '装修案例'
					},
					{
						name: '3D体验设计'
					},
					{
						name: '设计师推荐'
					}
				],
				house_id: null,
				house: "",
				// 数据列表
				demoList: null,
				dynaList: null,
				evalList: null,
				demoNum: 0,
				dynaNum: 0,
				evalNum: 0,
				// Nav栏
				navBackground: 'transparent',
				navTop: 100, // 滑动到此距离，展示nav导航栏，默认值：100
				navShow: false,
				navBackColor: '#fff',
				navFloorOpacity: 0,
				supportlist: [],
				// tab栏
				tabType: 'Demo', // Demo：案例  Dyna：动态  Eval：评价
				tabBarHeight: 0,
				tabItem_Demo: 0,
				tabItem_Dyna: 0,
				tabItem_Eval: 0,
				tabBar_Demo: null,
				tabBar_Dyna: null,
				tabBar_Eval: null,
				tabBar_Cursor: null,
				tabBarCursorX: null,
				tabIsScroll: false,
				scrollTop: 0,
				titleText: '',
				demoList3D: [],
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			this.scrollTop = scrollTop
			if (e.scrollTop >= 100) {
				this.titleText = '户型详情'
			} else {
				this.titleText = ''
			}
			// 滑动距离超过用户名 => 显示导航栏

			if (!this.tabIsScroll) {
				scrollTop += this.navHeight + this.tabBarHeight

				if (scrollTop > this.tabItem_Eval) {
					this.tabType = 'Eval'
					this.tabCursorTo('Eval')
				} else {
					if (scrollTop > this.tabItem_Dyna) {
						this.tabType = 'Dyna'
						this.tabCursorTo('Dyna')
					} else {
						if (scrollTop > this.tabItem_Demo) {
							this.tabType = 'Demo'
							this.tabCursorTo('Demo')
						}
					}
				}
			}
		},
		// onPageScroll(e) {

		// },
		computed: {
			navHeight() { // Nav栏高度
				var navHeights = uni.getStorageSync('StatusBarHeight')
				return navHeights.height
			},
		},

		// components: { navBar },

		onLoad(params) {
			this.$utils.getUrl()
			// testcode
			let scene = decodeURIComponent(params.scene);
			if(params.house_id){
				this.house_id = params.house_id
			}
			scene = scene.split('&');
			let obj = {};
			for (let i = 0; i < scene.length; i++) {
				let newscene = scene[i].split('=');
				obj[newscene[0]] = newscene[1];
			}
			if (obj.house_id) {
				this.house_id = obj.house_id
			}
			this.gethouse()
			this.getList()
			this.getdegin()
		},

		onReady() {
			let _this = this
			// 获取用户名所在位置
			let Query = uni.createSelectorQuery()
			Query.select("#userName").boundingClientRect(data => {
				if (data.top) _this.navTop = data.top + data.height
			}).exec()
		},


		filters: {
			formatDate(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		methods: {
			Go3Dpage(type){
				if(type == 0){
					uni.navigateTo({
						url: '/pages_view/pages/desiginview/experience?house_id=' + this.house_id,
					});
				}else{
					uni.navigateTo({
						url: '/pages_view/pages/desiginview/experience'
					});
				}
				
			},
			viwerurl(obsEasyDesignId) {
				uni.navigateTo({
					url: '/pages_3D/pages/3D/degin?obsEasyDesignId=' + obsEasyDesignId,
				});
			},
			// 获取数据列表
			getList() {
				let params = {
					bedroom_num: '',
					area: '',
					house_id:this.house_id,
					page: 1,
					pagesize: 10,
					is_light_design: 1
				}
				service_design.getDemoList(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							this.demoList3D = data

						}
					})
			},
			TabsChange(index) {
				this.current = index;
				// this.page = 1
			},
			dviewr(item) {
				let url = encodeURIComponent(item)
				uni.navigateTo({
					url: '/pages_3D/pages/3D/panorama?url=' + url
				});
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			navTomore() {
				uni.navigateTo({
					url: '/pages_design/pages/design/index/index'
				})
			},
			// 获取户型信息
			gethouse() {
				service_desginview.getdeatil({
						house_id: this.house_id
					})
					.then(res => {
						if (res.code == 1) {

							let data = res.data
							// 处理数据
							this.house = data
							this.demoNum = data.case_num
							// 处理设计案例数据
							let demoList = data.case_list
							// 设计师信息
							this.demoList = demoList // 设计案例数据
							// this.$nextTick(() => {
							// 	this.tabGetDomTop()
							// })
						}
					})
					.catch(err => {

					})
			},
			// 获取推荐设计师
			getdegin() {
				service_desginview.gettuidegin({
					house_id: this.house_id,
					pages: 1,
				}).then(res => {
					if (res.code == 1) {
						this.supportlist = res.data
						console.log(res.data,"获取推荐设计师");
					}
				});
			},

			// 设计动态==
			// 全文展开
			dyna_showText(id) {
				let list = this.dynaList.list

				for (let i = 0; i < list.length; i++) {
					if (list[i].id === id) {
						list[i].showTalk = !list[i].showTalk
						break
					}
				}
			},

			// 动态点赞
			trendStore(item, index) {
				let status = item.support_status
				if (status == 0) {
					uni.showModal({
						title: '提示',
						content: '确认取消点赞?',
						success: (res) => {
							if (res.confirm) {
								service_desginview.gitTrendstatus({
										trend_id: item.id,
										status: 1
									})
									.then(res => {
										if (res.code == 1) {
											this.dynaList[index].support_status = 1
											this.dynaList[index].support_num--
										} else {
											this.$utils.showErr({
												title: res.msg
											})
										}
									})
							} else if (res.cancel) {
								return
							}
						}
					});
				} else {
					service_desginview.gitTrendstatus({
							trend_id: item.id,
							status: 0
						})
						.then(res => {
							if (res.code == 1) {
								this.dynaList[index].support_status = 0
								this.dynaList[index].support_num++
							} else {
								this.$utils.showErr({
									title: res.msg
								})
							}
						})

				}

			},
			// 输入框输入内容事件
			inputKey(event, key) {
				this[key] = event.detail.value
			},
			moveHandle() {},

			// 跳转页面
			toPage(page, {
				trendId
			} = {}) {
				// 案例列表
				if (page === 'demo_list') {
					uni.navigateTo({
						url: '/pages_view/pages/desiginview/3dlist?house_id=' + this.house_id + '&tab=' + 0
					})
				}
				// 案例详情
				else if (page === 'demo_detail') {
					uni.navigateTo({
						url: '/pages_design/pages/design/demo/demo?caseId=' + trendId
					})
				}
				// 动态列表
				else if (page === 'dynamic_list') {
					uni.navigateTo({
						url: '/pages_design/pages/design/dynamic/list?house_id=' + this.house_id
					})
				}
				// 动态详情
				else if (page === 'dynamic_detail') {
					uni.navigateTo({
						url: '/pages_design/pages/design/dynamic/dynamic?trendId=' + trendId
					})
				}
				// 评价列表
				else if (page === 'evaluate_list') {
					uni.navigateTo({
						url: '/pages_design/pages/design/evaluate/evaluate?house_id=' + this.house_id
					})
				}
			},

			// tab栏操作=======
			// 切换tab栏
			tabToggle(type) {
				let _this = this
				let tabType = _this.tabType
				if (tabType !== type && !_this.tabIsScroll) {
					_this.tabType = type
					_this.tabIsScroll = true

					// 设置导航栏
					_this.navShow = true
					_this.navBackColor = "#333"
					_this.navFloorOpacity = 1

					// 移动到该tab栏所处位置
					let scrollTop = _this["tabItem_" + type]
					let navHeight = _this.navHeight
					let tabBarHeight = _this.tabBarHeight
					uni.pageScrollTo({
						scrollTop: scrollTop - navHeight - tabBarHeight,
						complete() {
							setTimeout(() => {
								_this.tabIsScroll = false
							}, 400)
						}
					})

					// 将光标移动到对应tab位置
					_this.tabCursorTo(type)
				}
			},
			// 预览图片
			preview(index, urls) {
				let img_url = []
				for (let i = 0; i < urls.length; i++) {
					img_url.push(
						urls[i].path
					);
				}
				uni.previewImage({
					urls: img_url,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			previews(urls) {
				let img_url = []
				img_url.push(
					urls
				);
				uni.previewImage({
					urls: img_url,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 移动tab栏光标
			tabCursorTo(type) {
				let target = 'tabBar_' + type

				if (this[target] && this.tabBar_Cursor) {
					this.tabBarCursorX = this[target].left + (this[target].width / 2) - (this.tabBar_Cursor.width / 2)
				}
				// 获取tab栏某一项
				else if (this.tabBar_Cursor) {
					uni.createSelectorQuery().select("#" + target).boundingClientRect(res => {
						this[target] = res
						this.tabCursorTo(type)
					}).exec()
				}
				// 获取光标
				else {
					uni.createSelectorQuery().select("#tabBar_Cursor").boundingClientRect(data => {
						this.tabBar_Cursor = data
						this.tabCursorTo(type)
					}).exec()
				}
			},

			// 获取tab栏锚点top 
			// tabGetDomTop() {
			// // 获取装修案例
			// uni.createSelectorQuery().select("#tabItem_Demo").fields({
			// 	rect: true,
			// 	scrollOffset: true
			// }, res => {
			// 	this.tabItem_Demo = res.top + res.scrollTop
			// }).exec()
			// // 获取设计动态
			// uni.createSelectorQuery().select("#tabItem_Dyna").fields({
			// 	rect: true,
			// 	scrollOffset: true
			// }, res => {
			// 	this.tabItem_Dyna = res.top + res.scrollTop
			// }).exec()
			// // 获取业主评价
			// uni.createSelectorQuery().select("#tabItem_Eval").fields({
			// 	rect: true,
			// 	scrollOffset: true
			// }, res => {
			// 	this.tabItem_Eval = res.top + res.scrollTop
			// }).exec()
			// // 获取tab栏高度
			// uni.createSelectorQuery().select("#tabBar").boundingClientRect(res => {
			// 	this.tabBarHeight = res.height
			// }).exec()
			// },

			// 输入框输入内容事件
			inputKey(event, key) {
				this[key] = event.detail.value
			},

			moveHandle() {},
		}
	}
</script>

<style lang="scss" scoped>
	.personal {
		background: #f6f7f8;
	}

	.p_dNums .icon-more {
		&::before {
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}

	// 3D体验馆
	.DlistView {

		// // 数据列表
		.l_dList {
			background: #fff;
			padding: 20rpx 30rpx 0 30rpx;
		}

		// 装修案例
		.l_dList .l_dDemo {
			padding: 0rpx 0 40rpx;

			.l_ddItem {
				padding: 42rpx 0 40rpx;

				&:nth-child(1) {
					padding-top: 0;
				}
			}

			.l_ddBanner {
				height: 376rpx;
				margin: 0 32rpx;
				border-radius: 8rpx;
				background: #f0f0f0;
				overflow: hidden;
				position: relative;
			}

			.l_ddInfo {
				line-height: 34rpx;
				font-size: 24rpx;
				margin: 18rpx 32rpx 0;
			}

			.l_ddTag {
				height: 36rpx;
				line-height: 36rpx;
				color: #a98f68;
				font-size: 20rpx;
				padding: 0 20rpx;
				margin-top: -2rpx;
				margin-right: 16rpx;
				border-radius: 18rpx;
				background: #f9f6f3;
				float: left;
			}

			.l_ddCont {
				overflow: hidden;
			}

			.l_ddVal {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.l_ddCutLine {
				width: 1px;
				height: 12rpx;
				margin: 0 8rpx;
				background: #333;
				display: inline-block;

				&:nth-last-child(1) {
					display: none;
				}
			}

			.l_ddRemark {
				line-height: 44rpx;
				font-size: 32rpx;
				font-weight: bold;
				padding-left: 36rpx;
				margin-top: 8rpx;
			}
		}

		.i_tBtn {
			width: 80rpx;
			height: 80rpx;
			background: rgba(0, 0, 0, .4);
			border: 1px solid #fff;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
		}

		.i_tbImg {
			margin: 5rpx auto 0;
			font-size: 38rpx;
			color: #fff;
			text-align: center;
		}

		.i_tbTxt {
			width: 100%;
			height: 34rpx;
			line-height: 34rpx;
			text-align: center;
			color: #fff;
			font-size: 20rpx;
			position: absolute;
			top: 40rpx;
			left: 0;
		}

		.no-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx 20rpx 0 0;
			padding-top: 40rpx;
		}

		.no-title {
			padding: 30rpx 0;
		}

		.no-card>text {
			font-size: 24rpx;
			color: #999;
		}

		.no-bnt {
			padding: 10rpx 20rpx;
			margin: 20rpx;
			border: 2rpx solid #eee;
			font-size: 26rpx;
			background-color: #fff;
		}

		.no-card image {
			height: 240rpx;
			width: 240rpx;
			padding: 40rpx;
		}

		.i_dItem {
			// margin: 20rpx 0;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			// box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;
			// padding: 0 30rpx 30rpx 30rpx;
			// border-radius: 10rpx;
		}

		.s_tops {
			position: relative;
			padding-left: 220rpx;

			.ts_left {
				position: absolute;
				width: 200rpx;
				height: 200rpx;
				left: 0;
				top: 0;
				border-radius: 10rpx;
				border: 1px #CCCCCC solid;
				overflow: hidden;
			}

			.ts_right {
				border-radius: 10rpx;
				position: relative;
				overflow: hidden;

				image {
					height: 420rpx;
				}
			}
		}

		.i_tSwiper {
			height: 200rpx;
			position: relative;
		}

		.s_tit {
			line-height: 40rpx;
			font-weight: 600;
			position: relative;
			padding: 24rpx 0;

			// text {
			// 	position: absolute;
			// 	background: #F6F7FB;
			// 	height: 60rpx;
			// 	line-height: 60rpx;
			// 	width: 140rpx;
			// 	text-align: center;
			// 	right: 0;
			// 	top: 10rpx;
			// 	border-radius: 8rpx;
			// }
		}
	}

	// 顶部作者栏=====
	.personal .p_auth {
		height: 0;
		position: relative;
		z-index: 500;

		.p_aCan {
			width: 100%;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;
			opacity: 0;
			transition: opacity .3s;

			&.active {
				opacity: 1;
			}
		}

		.p_aFocus {
			width: 114rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			color: #fff;
			font-size: 20rpx;
			margin: 0 36rpx 0 40rpx;
			border-radius: 28rpx;
			background: #333;
			float: right;

			&.active {
				color: #939393;
				background: #f6f7fb;
			}
		}

		.p_aHead {
			width: 68rpx;
			height: 68rpx;
			margin-right: 28rpx;
			border-radius: 50%;
			background: #f0f0f0;
			overflow: hidden;
			float: left;
		}

		.p_aName {
			height: 40rpx;
			line-height: 40rpx;
			overflow: hidden;
			flex: 1;
		}
	}


	// 背景墙=====
	.personal .p_wall {
		height: 500rpx;
		position: relative;

		.p_wPicture {
			width: 100vw;
			height: 500rpx;
			background: #f0f0f0;
			position: absolute;
			top: 0;
			left: 0;
		}

		.p_wShadow {
			width: 100vw;
			height: 500rpx;
			background: linear-gradient(180deg, rgba(18, 19, 23, .3) 0%, rgba(255, 255, 255, .3) 100%);
			position: absolute;
			top: 0;
			left: 0;
		}
	}


	// 用户信息=====
	.personal .p_user {
		padding: 32rpx 32rpx 40rpx;
		background: #fff;
		position: relative;

		// 头像
		.p_uHeadimg {
			width: 172rpx;
			height: 172rpx;
			border: 6rpx solid #ffd425;
			border-radius: 50%;
			background: #f0f0f0;
			position: absolute;
			top: -86rpx;
			left: 32rpx;
			box-shadow: 0 6rpx 16rpx 0 rgba(0, 0, 0, .16);
			box-sizing: border-box;
			overflow: hidden;
		}

		// 关注按钮
		.p_uFocus {
			width: 156rpx;
			height: 56rpx;
			padding: 30rpx 32rpx;
			position: absolute;
			top: 0;
			right: 0;
			box-sizing: content-box;

			.p_ufCan {
				height: 56rpx;
				color: #fff;
				font-size: 26rpx;
				border-radius: 28rpx;
				background: #333;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.p_ufCan.active {
				color: #939393;
				background: #f6f7fb;
			}

			&:active .p_ufCan {
				opacity: .88;
			}
		}

		.p_uName {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 44rpx;
			font-weight: bold;
			padding-left: 4rpx;
		}

		// 基础信息
		.p_uBase {
			padding-left: 4rpx;
			margin-top: 4rpx;
			overflow: hidden;
		}

		.p_ubItem {
			height: 44rpx;
			line-height: 44rpx;
			font-size: 24rpx;
			margin-right: 40rpx;
			float: left;

			&>text {
				font-size: 32rpx;
			}
		}

		// 标签
		.p_uTags {
			line-height: 0;
			padding: 18rpx 0 0 0;
		}

		.p_uTag {
			height: 48rpx;
			line-height: 48rpx;
			color: #a58f6d;
			font-size: 24rpx;
			padding: 0 18rpx;
			margin-top: 10rpx;
			margin-right: 16rpx;
			border-radius: 24rpx;
			background: #f9f6f3;
			display: inline-block;
		}

		// 备注信息
		.p_uData {
			padding: 36rpx;
			margin-top: 28rpx;
			border-radius: 10rpx;
			background: rgba(246, 247, 251, .4);
			position: relative;
		}

		.p_udMore {
			width: 104rpx;
			height: 80rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.p_udIcon {
			width: 32rpx;
			height: 32rpx;
		}

		.p_udItem {
			min-height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			margin-top: 20rpx;

			&:first-child {
				margin: 0;
			}
		}

		.p_udLabel {
			color: #939393;
			padding-right: 30rpx;
			float: left;
		}

		.p_udVal {
			min-height: 34rpx;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.p_udCutline {
			width: 1px;
			height: 12rpx;
			margin: 0 8rpx;
			background: #333;
			display: inline-block;

			&:nth-last-child(1) {
				display: none;
			}
		}
	}


	// 数据列表=====
	.personal .p_data {

		// 数据列表（案例、动态、评价）=====
		.p_dContain {
			// margin-top: 16rpx;
		}

		// tab栏
		.p_dSticky {
			position: sticky;
			top: 0;
			z-index: 11;
			padding: 8rpx 0;
		}

		.p_dTabs {
			height: 108rpx;
			background: #fff;
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;

			&::after {
				content: "";
				width: 100%;
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				left: 0;
				bottom: 0;
				transform: scaleY(.5);
			}
		}

		.p_dtItem {
			height: 108rpx;
			line-height: 108rpx;
			text-align: center;
			float: left;

			&.active {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.p_dtCursor {
			width: 40rpx;
			height: 8rpx;
			border-radius: 4rpx 4rpx 0 0;
			background: #ffd425;
			position: absolute;
			left: 0;
			bottom: 0;
			transition: all .3s;
		}

		// 数据列表
		.p_dList {
			// padding-top: 40rpx;
			margin-top: 0rpx;
			background: #fff;

			&:nth-child(1) {
				// padding-top: 60rpx;
				// margin-top: 0;
			}
		}

		.p_dTitle {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding: 0 36rpx;
			position: relative;
		}

		.p_dNums {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 24rpx;
			font-weight: normal;
			padding: 0 24rpx 0 40rpx;
			position: absolute;
			right: 32rpx;
			top: -20rpx;
		}

		.p_dArrow {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #6c6c6c;
			font-size: 32rpx;
			position: absolute;
			top: 32rpx;
			right: -4rpx;
		}

		.p_dBtn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 24rpx;
			margin: 0 32rpx 40rpx;
			border-radius: 4rpx;
			border: 1px solid #707070;
			box-sizing: content-box;
		}

		// 装修案例/设计动态/业主评价 底线
		.p_dDemo .p_ddItem,
		.p_dDyna .p_ddItem,
		.p_dEval .p_deItem {
			position: relative;

			&::after {
				content: "";
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 32rpx;
				right: 32rpx;
				transform: scaleY(.5);
			}

			&:nth-last-child(1)::after {
				content: none;
			}
		}

		// 数据列表（案例、动态、评价）=====
		.l_data {
			padding-top: 170rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		// 数据列表
		.l_data .l_dList {
			background: #fff;
			padding: 0 30rpx;
		}

		// 设计案例 底线
		.l_data .l_dDemo .l_ddItem {
			position: relative;

			&::after {
				content: "";
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 32rpx;
				right: 32rpx;
				transform: scaleY(.5);
			}

			&:nth-last-child(1)::after {
				content: none;
			}
		}

		// 装修案例
		.p_dDemo {
			padding-top: 28rpx;
			overflow: hidden;
			margin: 0 32rpx;

			.p_ddItem {

				&:nth-child(1) {
					padding-top: 0;
				}
			}

			.p_ddBanner {
				height: 376rpx;
				border-radius: 8rpx;
				background: #f0f0f0;
				overflow: hidden;
				position: relative;
			}

			.p_ddInfo {
				min-height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				margin: 18rpx 32rpx 0 0rpx;
			}

			.p_ddTag {
				height: 36rpx;
				line-height: 36rpx;
				color: #a98f68;
				font-size: 20rpx;
				padding: 0 20rpx;
				margin-top: -2rpx;
				margin-right: 16rpx;
				border-radius: 18rpx;
				background: #f9f6f3;
				float: left;
			}

			.p_ddCont {
				overflow: hidden;
			}

			.p_ddVal {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.p_ddCutLine {
				width: 1px;
				height: 12rpx;
				margin: 0 8rpx;
				background: #333;
				display: inline-block;

				&:nth-last-child(1) {
					display: none;
				}
			}

			.p_ddRemark {
				line-height: 44rpx;
				font-size: 32rpx;
				font-weight: bold;
				padding-bottom: 18rpx;
				margin-top: 8rpx;
				margin-bottom: 28rpx;
				border-bottom: 1px solid #F4F4F4;
			}
		}

		// 设计动态
		.p_dDyna {
			overflow: hidden;

			.p_ddItem {
				padding-top: 40rpx;
			}

			// 用户信息
			.p_ddUser {
				padding: 0 32rpx;
			}

			.p_ddHead {
				width: 84rpx;
				height: 84rpx;
				margin-right: 20rpx;
				border-radius: 50%;
				background: #f0f0f0;
				overflow: hidden;
				float: left;
			}

			.p_ddCan {
				padding-top: 6rpx;
				overflow: hidden;
			}

			.p_ddName {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
			}

			.p_ddTime {
				height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
			}

			// 标签
			.p_ddTags {
				margin: 18rpx 32rpx 0;
				overflow: hidden;
			}

			.p_ddTag {
				height: 44rpx;
				line-height: 44rpx;
				color: #a58f6d;
				font-size: 24rpx;
				padding: 0 20rpx 0 48rpx;
				border-radius: 22rpx;
				background: #f9f6f3;
				position: relative;
				float: left;
			}

			.p_ddTag-icon {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				top: 4rpx;
				left: 4rpx;
			}

			// 内容
			.p_ddText {
				line-height: 44rpx;
				margin: 28rpx 36rpx 0;
			}

			.p_ddAll {
				height: 36rpx;
				line-height: 36rpx;
				color: #a98f68;
				font-size: 26rpx;
				margin-top: 8rpx;
				position: relative;
			}

			.p_ddAll-click {
				width: 140rpx;
				height: 70rpx;
				position: absolute;
				top: -18rpx;
				left: -36rpx;
			}

			.p_ddImgs {
				padding: 18rpx 0 0 32rpx;
				overflow: hidden;
			}

			.p_ddImg {
				width: 220rpx;
				height: 220rpx;
				margin: 12rpx 14rpx 0 0;
				border-radius: 4rpx;
				background: #f0f0f0;
				overflow: hidden;
				float: left;
			}

			// 底部功能键
			.p_funs {
				padding: 20rpx 32rpx 22rpx;
				display: flex;
			}

			.p_fun {
				height: 74rpx;
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;

				&:nth-child(1) {
					justify-content: flex-start;
				}

				&:nth-last-child(1) {
					justify-content: flex-end;
				}
			}

			.p_fIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #6c6c6c;
				font-size: 40rpx;
				margin-right: 16rpx;
				display: inline-block;
			}
		}

		// 业主评价
		.p_dEval {
			padding-top: 40rpx;
			overflow: hidden;

			.p_deItem {
				padding: 40rpx 0;

				&:nth-child(1) {
					padding-top: 0;
				}
			}

			.p_deHead {
				width: 84rpx;
				height: 84rpx;
				margin: 0 20rpx 0 32rpx;
				border-radius: 50%;
				background: #f0f0f0;
				overflow: hidden;
				float: left;
			}

			.p_deCont {
				overflow: hidden;
			}

			.p_deUser {
				padding: 8rpx 36rpx 0 0;
			}

			.p_deTime {
				height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
			}

			.p_deName {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
			}

			.p_deStars {
				height: 20rpx;
				margin-top: 8rpx;
			}

			.p_deStar {
				width: 20rpx;
				height: 20rpx;
				margin-right: 8rpx;
				float: left;
			}

			.p_deRemark {
				height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
				margin-top: 16rpx;
			}

			.p_deText {
				line-height: 44rpx;
				padding-right: 36rpx;
				margin-top: 28rpx;
			}

			.p_deImgs {
				padding-top: 16rpx;
				overflow: hidden;
			}

			.p_deImg {
				width: 188rpx;
				height: 188rpx;
				margin: 12rpx 10rpx 0 0;
				border-radius: 4rpx;
				background: #f0f0f0;
				float: left;
				overflow: hidden;
			}
		}
	}

	// 装修案例
	.l_data .l_dDemo {
		padding: 0rpx 0 40rpx;

		.l_ddItem {
			padding: 42rpx 0 40rpx;

			&:nth-child(1) {
				padding-top: 0;
			}
		}

		.l_ddBanner {
			height: 376rpx;
			margin: 0 32rpx;
			border-radius: 8rpx;
			background: #f0f0f0;
			overflow: hidden;
			position: relative;
		}

		.l_ddInfo {
			line-height: 34rpx;
			font-size: 24rpx;
			margin: 18rpx 32rpx 0;
		}

		.l_ddTag {
			height: 36rpx;
			line-height: 36rpx;
			color: #a98f68;
			font-size: 20rpx;
			padding: 0 20rpx;
			margin-top: -2rpx;
			margin-right: 16rpx;
			border-radius: 18rpx;
			background: #f9f6f3;
			float: left;
		}

		.l_ddCont {
			overflow: hidden;
		}

		.l_ddVal {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.l_ddCutLine {
			width: 1px;
			height: 12rpx;
			margin: 0 8rpx;
			background: #333;
			display: inline-block;

			&:nth-last-child(1) {
				display: none;
			}
		}

		.l_ddRemark {
			line-height: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			padding-left: 36rpx;
			margin-top: 8rpx;
		}
	}

	// 底部咨询栏=====
	.personal .p_consult {
		.p_cShim {
			height: 156rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.p_cBox {
			width: 100vw;
			height: 152rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1000;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.p_cBtn1,
		.p_cBtn2 {
			width: 342rpx;
			height: 72rpx;
			color: #fff;
			border-radius: 4rpx 0 0 4rpx;
			background: #c3ab7c;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;

			&:active {
				opacity: .88;
			}
		}

		.p_cBtn2 {
			border-radius: 0 4rpx 4rpx 0;
			background: #333;
		}
	}

	// 固定条
	.into_shopcart {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 301;
		background-color: #fff;
		display: flex;
		align-items: center;

		&_box {
			padding: 14rpx 22rpx;
			display: flex;

			// 左边小图标
			.into_icon {
				display: flex;
				position: relative;
				width: 260rpx;

				.icon_store {
					width: 100rpx;
					margin-left: 30rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.store {
						width: 32rpx;
						height: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.icon_service {
					width: 100rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					position: absolute;
					right: 6rpx;
					top: 2rpx;

					.service {
						width: 34rpx;
						height: 32rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.contact_btn {
					width: 44rpx;
					height: 74rpx;
					margin-left: 46rpx;
				}

				button[plain] {
					border: 0 none;
				}
			}

			// 右边按钮
			.into_btn {
				width: 380rpx;
				height: 72rpx;
				border-radius: 10rpx;
				margin-left: 50rpx;
				display: flex;

				.join_cart {
					width: 226rpx;
					height: 100%;
					text-align: center;
					line-height: 72rpx;
					background-color: #C3AB7C;
					border-radius: 10rpx 0rpx 0rpx 10rpx;

					text {
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						color: #FFFFFF;
					}
				}

				.into_settlement {
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 72rpx;
					background-color: #C3AB7C;
					border-radius: 70rpx;

					text {
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	// 弹窗 - 取消关注=====
	// 动画效果：
	// 画板，隐藏阶段，.3s后隐藏画板
	// 背景：.3s时间，【显示】opacity(0 -> 1) 【隐藏】opacity(1 -> 0)
	// 弹窗：.3s时间，
	//    【显示】
	//     0%: transform: scale3d(0.6, 0.6, 0.6);opacity: .6;
	//     80% {transform: scale3d(1.1, 1.1, 1.1);opacity: 1;}
	//     100% {transform: scale3d(1, 1, 1);opacity: 1;}
	//    【隐藏】
	//     0% {transform: scale3d(1, 1, 1);opacity: 1;}
	//     20% {transform: scale3d(1.1, 1.1, 1.1);opacity: 1;}
	//     100% {transform: scale3d(0.6, 0.6, 0.6);opacity: .6;}
	.personal .p_focus {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		visibility: hidden;
		transition: visibility .3s;

		&.active {
			visibility: visible;

			.p_fBg {
				opacity: 1;
			}

			.p_fBox {
				animation: popFocusIn .3s;
			}
		}

		.p_fBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			transition: opacity .3s;
			opacity: 0;
		}

		.p_fBox {
			width: 500rpx;
			height: 240rpx;
			margin-top: -120rpx;
			margin-left: -250rpx;
			border-radius: 8rpx;
			background: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			animation: popFocusOut .3s;
		}

		.p_fTitle {
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-weight: bold;
			margin-top: 60rpx;
		}

		.p_fBtns {
			margin: 40rpx 40rpx 0;
		}

		.p_fClose,
		.p_fConfim {
			width: 196rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			background: #f6f7fb;
			float: left;

			&:active {
				opacity: .88;
			}
		}

		.p_fConfim {
			background: #ffd425;
			float: right;
		}
	}

	@keyframes popFocusIn {
		0% {
			transform: scale3d(0.6, 0.6, 0.6);
			opacity: .6;
		}

		80% {
			transform: scale3d(1.1, 1.1, 1.1);
			opacity: 1;
		}

		100% {
			transform: scale3d(1, 1, 1);
			opacity: 1;
		}
	}

	@keyframes popFocusOut {
		0% {
			transform: scale3d(1, 1, 1);
			opacity: 1;
		}

		20% {
			transform: scale3d(1.1, 1.1, 1.1);
			opacity: 1;
		}

		100% {
			transform: scale3d(0.72, 0.72, 0.72);
			opacity: .72;
		}
	}


	// 弹窗 - 服务信息=====
	// 动画效果：
	// 画板，隐藏阶段，.3s后隐藏画板
	// 背景：.3s时间，【显示】opacity(0 -> 1) 【隐藏】opacity(1 -> 0)
	// 弹窗：.3s时间，【显示】transform: translateY(0) 【隐藏】transform: translateY(100%)
	.personal .p_info {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		visibility: hidden;
		transition: visibility .3s;

		&.active {
			visibility: visible;

			.p_iBg {
				opacity: 1;
			}

			.p_iBox {
				transform: translateY(0);
			}
		}

		.p_iBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			transition: opacity .3s;
			opacity: 0;
		}

		.p_iBox {
			width: 100%;
			height: 968rpx;
			border-radius: 24rpx 24rpx 0 0px;
			background: #fff;
			position: absolute;
			left: 0;
			bottom: 0;
			transition: transform .3s;
			transform: translateY(100%);
		}

		.p_iClose {
			width: 104rpx;
			height: 132rpx;
			line-height: 132rpx;
			text-align: center;
			font-size: 40rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		.p_iTitle {
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 40rpx;
		}

		.p_iData {
			margin-top: 60rpx;
		}

		.p_iItem {
			margin: 40rpx 36rpx 0;
		}

		.p_iLabel {
			line-height: 40rpx;
			color: #939393;
			margin-right: 40rpx;
			float: left;
		}

		.p_iVal {
			min-height: 40rpx;
			line-height: 40rpx;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.p_iCutLine {
			width: 1px;
			height: 12rpx;
			margin: 0 8rpx;
			background: #333;
			display: inline-block;

			&:nth-last-child(1) {
				display: none;
			}
		}
	}


	// 弹窗 - 评论=====
	// 动画效果：
	// 画板，隐藏阶段，.3s后隐藏画板
	// 背景：.3s时间，【显示】opacity(0 -> 1) 【隐藏】opacity(1 -> 0)
	// 弹窗：.3s时间，【显示】transform: translateY(0) 【隐藏】transform: translateY(100%)
	.personal .p_evalute {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		visibility: hidden;
		transition: visibility .3s;

		&.active {
			visibility: visible;

			.p_eBg {
				opacity: 1;
			}

			.p_eContain {
				transform: translateY(0);
			}
		}

		.p_eBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			transition: opacity .3s;
			opacity: 0;
		}

		.p_eBox {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-flow: column;
		}

		.p_eShim {
			height: 256rpx;
		}

		.p_eContain {
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			flex: 1;
			transition: transform .3s;
			transform: translateY(100%);
		}

		.p_eClose {
			width: 104rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-size: 40rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		.p_eTitle {
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-weight: bold;
		}

		// 评论
		.p_eList {
			padding-left: 32rpx;
			padding-bottom: 112rpx;
			overflow-y: auto;
			flex: 1;
		}

		.p_eCan {
			height: 100%;
		}

		.p_eItem {
			margin-top: 30rpx;

			&:nth-child(1) {
				margin-top: 20rpx;
			}

			&:nth-last-child(1) .p_eCont::after {
				content: none;
			}
		}

		.p_eHead,
		.p_eIts .p_eiHead {
			width: 66rpx;
			height: 66rpx;
			margin-right: 16rpx;
			border-radius: 50%;
			background: #f0f0f0;
			float: left;
		}

		.p_eCont {
			padding-bottom: 28rpx;
			position: relative;
			overflow: hidden;

			&::after {
				content: "";
				width: 100%;
				height: 1px;
				background: #f4f4f4;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleY(.5);
			}
		}

		.p_eName,
		.p_eIts .p_eiName {
			height: 28rpx;
			line-height: 28rpx;
			color: #939393;
			font-size: 20rpx;
		}

		.p_eAuth,
		.p_eIts .p_eiAuth {
			width: 64rpx;
			height: 28rpx;
			line-height: 28rpx;
			text-align: center;
			color: #333;
			font-size: 20rpx;
			margin-left: 8rpx;
			border-radius: 28rpx;
			background: #f6f7fb;
			display: inline-block;
		}

		.p_eTxt,
		.p_eIts .p_eiTxt {
			min-height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			padding-right: 32rpx;
			margin-top: 4rpx;
		}

		.p_eTip,
		.p_eIts .p_eiTip {
			color: #939393;
			font-size: 20rpx;
			padding-left: 16rpx;
			display: inline-block;
		}

		// 他人回复
		.p_eiItem {
			margin-top: 16rpx;
		}

		.p_eiCont {
			overflow: hidden;
		}

		.p_eiReply {
			color: #939393;
			font-size: 20rpx;
			padding: 0 4rpx;
		}

		// 回复框
		.p_eReply {
			width: 100%;
			height: 112rpx;
			padding-left: 32rpx;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .1);

			.p_erSend {
				width: 108rpx;
				height: 112rpx;
				line-height: 112rpx;
				color: #939393;
				padding-left: 16rpx;
				float: right;
			}

			.p_erInput {
				height: 64rpx;
				margin-top: 24rpx;
				border-radius: 32rpx;
				background: #f6f7fb;
				position: relative;
				overflow: hidden;

				&>input {
					width: 100%;
					height: 100%;
					padding: 0 88rpx 0 28rpx;
				}
			}

			.p_erIcon {
				width: 88rpx;
				height: 64rpx;
				line-height: 64rpx;
				color: #6c6c6c;
				font-size: 48rpx;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
			}
		}

		// 回复框
		// .p_eReply {width: 100%;height: 112rpx;background: #fff;position: absolute;bottom: 0;left: 0;box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .1);
		// 	.p_erCan {height: 64rpx;margin: 24rpx 108rpx 0 32rpx;border-radius: 32rpx;background: #f6f7fb;}
		// 	.p_erInput {width: 100%;height: 100%;padding: 24rpx 196rpx 24rpx 60rpx;position: absolute;left: 0;top: 0;z-index: 1;}
		// 	.p_erIcon {width: 88rpx;height: 112rpx;line-height: 112rpx;color: #6c6c6c;font-size: 48rpx;text-align: center;position: absolute;top: 0;right: 108rpx;z-index: 3;}
		// 	.p_erSend {width: 108rpx;height: 112rpx;line-height: 112rpx;color: #939393;padding-left: 16rpx;position: absolute;top: 0;right: 0;z-index: 2;}
		// }
	}

	// 设计师推荐
	.p_dList {
		margin-top: 24rpx;

		.i_dOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 72rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;

			.i_doIcon {
				width: 32rpx;
				height: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}

		.i_tOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 64rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;

			.i_toIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				color: #6c6c6c;
				font-size: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}

		.i_dTitle {
			height: 86rpx;
			line-height: 122rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding-left: 32rpx;
		}

		.i_dList {
			width: 100%;
			padding: 28rpx 32rpx;
			overflow-x: auto;
			white-space: nowrap;

			&::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
			}
		}

		.i_dItem {
			width: 512rpx;
			height: 446rpx;
			margin-right: 24rpx;
			border-radius: 10rpx;
			background: #fff;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .06);
			display: inline-block;

			&:nth-last-child(1) {
				margin: 0;
			}
		}

		.i_dUser {
			height: 164rpx;
			padding: 28rpx 28rpx 0;
		}

		.i_dHead {
			width: 64rpx;
			height: 64rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			background: #f6f7fb;
			overflow: hidden;
			float: left;
		}

		.i_dFee {
			height: 44rpx;
			line-height: 44rpx;
			font-size: 20rpx;
			float: right;
		}

		.i_dName {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			font-weight: bold;
			margin-top: 2rpx;
		}

		.i_dRemark {
			height: 28rpx;
			line-height: 28rpx;
			font-size: 20rpx;
			color: #939393;
		}

		.i_dTags {
			margin-top: 8rpx;
		}

		.i_dTag {
			height: 36rpx;
			line-height: 36rpx;
			color: #a98f68;
			font-size: 20rpx;
			padding: 0 20rpx;
			margin-right: 8rpx;
			border-radius: 18rpx;
			background: #f9f6f3;
			display: inline-block;
		}

		.i_dImage {
			height: 254rpx;
			margin: 0 28rpx;
			border-radius: 8rpx;
			background: #f6f7fb;
			overflow: hidden;
		}
	}

	.d_cTitle {
		font-size: 32rpx;
	}

	.d_cInfo {
		margin-top: 20rpx;
		color: #939393;
	}

	.aiimg {}

	.housenum {
		margin-top: 40rpx;
		display: flex;
		padding: 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 4rpx 4rpx 10rpx 4rpx rgba(0, 0, 0, 0.1);

		.num {
			flex: 1;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			line-height: 50rpx;

			text {
				display: black;
			}
		}
	}
</style>
